import React, { useRef, useState } from 'react'
import style from './style.module.css'
import { DownFill } from 'antd-mobile-icons'
import { SearchBar, Button } from 'antd-mobile'
import { Dropdown, Radio, Space, List } from 'antd-mobile'
import img1 from '../../static/my_icon/007_登记记录.png'
import img3 from '../../static/my_icon/007_版权著作.png'
import img2 from '../../static/my_icon/007_人力招聘.png'
import { Slider, Toast } from 'antd-mobile'
function Index({ flag, searchfn, handleRegionScreen, handlePriceScreen, handleHouseTypeScreen, handleOrientationScreen }) {
    const searchRef = useRef(null)
    const dropdownRef = useRef(null)
    const [value, setValue] = useState(0); // 初始化值为0

    //区域筛选列表和选择下标
    const regionList = ['全部', '昌平', '丰台', '海淀', '朝阳']
    const [regionIndex, setRegionIndex] = useState(0)

    //价格筛选列表和选择下标
    const priceList = ['全部', '10万+', '20万+', '50万+', '100万+']
    const [priceIndex, setPriceIndex] = useState(0)


    //买房类型筛选列表和选择下标
    const buy_house_type_List = ['不限', '新房', '二手房']
    const [buy_house_typeIndex, setBuyIndex] = useState(0)


    //租房类型筛选列表和选择下标
    const rant_house_type_List = ['不限', '整租', '合租']
    const [rant_house_typeIndex, setRantIndex] = useState(0)

    //户型筛选列表和选择下标
    const house_type_List = ['不限', '1室', '2室', '3室', '3室+']
    const [house_typeIndex, setHouseIndex] = useState(0)

    //验真情况筛选列表和选择下标
    const checkList = ['不限', '安选']
    const [checkIndex, setCheckIndex] = useState(0)

    //验真情况筛选列表和选择下标
    const orientationList = ['不限', '东', '南', '西', '北']
    const [orientationIndex, setOrientationIndex] = useState(0)


    const handleSliderChange = (value) => {
        setValue(value);
    };
    //关闭筛选栏方法
    const dropdownClose = () => {

        
        dropdownRef.current.close()
    }
    //区域筛选方法
    const regionScreenClick = () => {
        handleRegionScreen(regionList[regionIndex])
        dropdownClose()
    }
    //价格筛选方法
    const priceScreenClick = () => {
        handlePriceScreen(value)
        dropdownClose()
    }
    return (
        <div className={style['screen_wapper']}>
            <div className={style['screen_up']}>
                <div>北京<DownFill style={{ color: '#999', marginLeft: '5px' }} /></div>
                <div><SearchBar placeholder='请在这里输入区域/商圈' onSearch={searchfn} /></div>
                <div>地图找房</div>
            </div>
            <div className={style['screen_middle']}>
                <div>
                    <div><img src={img1} alt="" /></div>
                    <div>找商铺</div>
                </div>
                <div>
                    <div><img src={img2} alt="" /></div>
                    <div>找写字楼</div>
                </div>
                <div>
                    <div><img src={img3} alt="" /></div>
                    <div>找小区</div>
                </div>
            </div>
            <div className={style['screen_bom']}>
                <Dropdown
                    closeOnMaskClick={false}
                    ref={dropdownRef}
                >
                    <Dropdown.Item key='region' title='区域'>
                        <List style={{
                            '--font-size': '14px',
                            '--active-background-color': '#f2f2f2'
                        }}>
                            {
                                regionList.map((item, index) => {
                                    return <List.Item key={index}>
                                        <div
                                            style={regionIndex == index ? { color: 'red' } : {}}
                                            onClick={() => {
                                                setRegionIndex(index)
                                            }}
                                        >{item}</div>
                                    </List.Item>
                                })
                            }
                        </List>
                        <Button
                            style={{ width: '100%', background: '#FD5958', color: '#fff' }}
                            onClick={regionScreenClick}
                        >确定</Button>
                    </Dropdown.Item>
                    <Dropdown.Item key='price' title='价格'>
                        <List style={{
                            '--font-size': '14px',
                            '--active-background-color': '#f2f2f2'
                        }}>
                            {
                                priceList.map((item, index) => {
                                    return <List.Item key={index}>
                                        <div
                                            style={priceIndex == index ? { color: 'red' } : {}}
                                            onClick={() => {
                                                switch (index) {
                                                    case 0: setValue(0); break
                                                    case 1: setValue(10); break
                                                    case 2: setValue(20); break
                                                    case 3: setValue(50); break
                                                    case 4: setValue(100); break
                                                }
                                                setPriceIndex(index)
                                            }}
                                        >{item}</div>
                                    </List.Item>
                                })
                            }
                        </List>
                        <div style={{ padding: '0 20px', textAlign: 'center' }}>
                            <Slider defaultValue={0} value={value} onChange={handleSliderChange} style={{
                                '--fill-color': 'red'
                            }} />
                            <p>￥{value}万+</p>
                        </div>
                        <Button
                            style={{ width: '100%', background: '#FD5958', color: '#fff' }}
                            onClick={priceScreenClick}
                        >确定</Button>
                    </Dropdown.Item>
                    <Dropdown.Item key='more' title='户型'>
                        {
                            flag == 'buy-house' ? (
                                <div style={{ padding: 12 }} >
                                    <div className={style['buy-house-type']}>
                                        <h3 style={{ textAlign: 'center' }}>买房类型</h3>
                                        <div className={style['container']}>
                                            {
                                                buy_house_type_List.map((item, index) => {
                                                    return <divnew_house
                                                        key={index}
                                                        style={buy_house_typeIndex == index ? { background: '#f60', color: '#fff' } : {}}
                                                        onClick={() => {
                                                            setBuyIndex(index)
                                                        }}
                                                    >{item}</divnew_house>
                                                })
                                            }
                                        </div>
                                    </div>
                                    <div className={style['house-type']}>
                                        <h3 style={{ textAlign: 'center' }}>户型</h3>
                                        <div className={style['container']}>
                                            {
                                                house_type_List.map((item, index) => {
                                                    return <div
                                                        key={index}
                                                        style={house_typeIndex == index ? { background: '#f60', color: '#fff' } : {}}
                                                        onClick={() => {
                                                            setHouseIndex(index)
                                                        }}
                                                    >{item}</div>
                                                })
                                            }
                                        </div>

                                    </div>

                                </div>
                            ) : (
                                <div style={{ padding: 12 }} >
                                    <div className={style['rant-house-type']}>
                                        <h3 style={{ textAlign: 'center' }}>租房类型</h3>
                                        <div className={style['container']}>
                                            {
                                                rant_house_type_List.map((item, index) => {
                                                    return <div
                                                        key={index}
                                                        style={rant_house_typeIndex == index ? { background: '#f60', color: '#fff' } : {}}
                                                        onClick={() => {
                                                            setRantIndex(index)
                                                        }}
                                                    >{item}</div>
                                                })
                                            }
                                        </div>
                                    </div>
                                    <div className={style['house-type']}>
                                        <h3 style={{ textAlign: 'center' }}>户型</h3>
                                        <div className={style['container']}>
                                            {
                                                house_type_List.map((item, index) => {
                                                    return <div
                                                        key={index}
                                                        style={house_typeIndex == index ? { background: '#f60', color: '#fff' } : {}}
                                                        onClick={() => {
                                                            setHouseIndex(index)
                                                        }}
                                                    >{item}</div>
                                                })
                                            }
                                        </div>
                                    </div>
                                </div>
                            )
                        }
                        <Button
                            style={{ width: '100%', background: '#FD5958', color: '#fff' }}
                            onClick={() => {
                                if (flag == 'buy-house') {
                                    handleHouseTypeScreen(buy_house_type_List[buy_house_typeIndex], house_type_List[house_typeIndex])
                                } else {
                                    handleHouseTypeScreen(rant_house_type_List[rant_house_typeIndex], house_type_List[house_typeIndex])
                                }
                                dropdownClose()

                            }}
                        >确定</Button>
                    </Dropdown.Item>
                    <Dropdown.Item key='more2' title='筛选'>
                        <div style={{ padding: 12 }}>
                            <div className={style['rant-house-type']}>
                                <h3 style={{ textAlign: 'center' }}>验真情况</h3>
                                <div className={style['container']}>
                                    {
                                        checkList.map((item, index) => {
                                            return <div
                                                key={index}
                                                style={checkIndex == index ? { background: '#f60', color: '#fff' } : {}}
                                                onClick={() => {
                                                    setCheckIndex(index)
                                                }}
                                            >{item}</div>
                                        })
                                    }
                                </div>
                            </div>
                            <div className={style['house-type']}>
                                <h3 style={{ textAlign: 'center' }}>朝向</h3>
                                <div className={style['container']}>
                                    {
                                        orientationList.map((item, index) => {
                                            return <div
                                                key={index}
                                                style={orientationIndex == index ? { background: '#f60', color: '#fff' } : {}}
                                                onClick={() => {
                                                    setOrientationIndex(index)
                                                }}
                                            >{item}</div>
                                        })
                                    }
                                </div>
                            </div>
                        </div>
                        <Button
                            style={{ width: '100%', background: '#FD5958', color: '#fff' }}
                            onClick={() => {
                                handleOrientationScreen(checkList[checkIndex], orientationList[orientationIndex])
                                dropdownClose()
                            }}
                        >确定</Button>

                    </Dropdown.Item>
                </Dropdown>
            </div>
        </div >
    )
}

export default Index